import { Component, Input } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

@Component({
    selector : 'Carousel-item',
    templateUrl : "./carousel-item.component.html",
    styleUrls : ['./carousel-item.component.css'],
    animations: [
        trigger('state', [
            transition('void => active', [
                style({
                    opacity: 0
                }),
                animate('0.2s ease-in')
            ]),
            transition('active => void', [
                animate('0.2s 10 ease-out', style({
                    opacity: 0
                }))
            ])
        ])
    ]
})
export class CarouselItemComponent {
    @Input() id:string; 
    @Input() active:string;

    state:string = 'active';   
}